<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
	</head>
	<body>
    <div id="app" v-cloak>
      <input type="text" v-model="num1" placeholder="请输入第1个数字">
      <select v-model="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model="num2" placeholder="请输入第2个数字">
      <input type="button" value="=" @click="btn">
      <input type="text" v-model="res">
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          num1: null,
          sel: '+',
          num2: null,
          res: null
        },
        methods: {
          btn() {
            if (this.sel == "+") {
              this.res = parseInt(this.num1) + parseInt(this.num2)
            } else if (this.sel == "-") {
              this.res = parseInt(this.num1) - parseInt(this.num2)
            } else if (this.sel == "*") {
              this.res = parseInt(this.num1) * parseInt(this.num2)
            } else
            {this.res = parseInt(this.num1) / parseInt(this.num2)
          }
        }
      }
      })
    </script>
	</body>
</html>
